import React, { useState } from 'react';
import {withRouter} from 'react-router-dom';
import './index.css'
import {Tabs, message, Collapse} from 'antd';
import {
    ArrowLeftOutlined
} from '@ant-design/icons';
import { evidenceBlock } from "@/utils/api";
import {connect} from "react-redux";
import ReactJson from 'react-json-view'
import Header from "../../components/Header/Header"
import Footer from "../../components/Footer/Foot"

const { TabPane } = Tabs;
const { Panel } = Collapse;

interface InitProp {
  history: any;
}
interface IState {
  list: any,
  detail: [
      {
          txid:string,
          timestamp: number,
          actions: [{
                  rwSet: [
                      {
                          wSet:any
                      }
                  ]
          }]
      }
  ],
    isShow: boolean
}

interface IProps {
    match: any
}

class EvidenceItem extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      list: [],
        detail: [ {
            txid: "",
            timestamp: 0,
            actions: [
                {
                 rwSet: [
                        {
                            wSet: [{}]
                        }
                    ]
                }
            ]
        }],
        isShow: false
    }

    sessionStorage.setItem("path", this.props.match.path)

      console.log(this.props.match.path)



    evidenceBlock(
    )
        .then((res: any) => {
          console.log(res)
          this.setState({
            list: res.data.data,
          });
        })
        .catch((error: any) => {
          message.error(error);
        })

  }

  getYMDHMS (timestamp: any) {
      let time:any = new Date(timestamp*1000)
    return time.toLocaleDateString().replace(/\//g, "-") + " " + time.toTimeString().substr(0, 8)
  }

    formateDate(datetime:any) {
        // let  = "2019-11-06T16:00:00.000Z"
        function addDateZero(num:any) {
            return (num < 10 ? "0" + num : num);
        }
        let d = new Date(datetime);
        let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds());

        return formatdatetime;
    }

    detial = (e:any) => {
      this.setState({
          detail: e,
          isShow: true
      })
    }

     jsonTop = (e:any) => {
         // e['created'] = this.getYMDHMS(e['created'])
         let index=e.lastIndexOf("value=");
         e=e.substring(index+6);
         e = JSON.parse(e)
         e['created'] = this.formateDate(e['created'])
         return e
     }




  render () {
    const {  list, detail,isShow } = this.state;
    return (
        <div className="box">

            <Header></Header>
  <div className="app-query">
          <div className="query_auto">
          <div className="query_top">
          <div className="left">
          <div className="left_top">
          <span className="line"></span>
          <span>证/据/链</span>
          </div>
          <div className="text">将科学研究过程与区块链技术进行结合，对科学研究轨迹进行存证，科学实验每个环节的科学记录及主要责任人都清晰记录，形成科学论文证据链，保障科研活动可审计、可追溯。</div>
      </div>
      <img src={require("../../assets/img/lineimg.png")} alt="" />
          </div>
          <div className="query_top query_ul">
          <div className="left">
          <div className="left_top">
          <span className="line"></span>
          <span>系/统/当/前/状/态</span>
          </div>
          </div>
          <div className="ul">
          <div className="li">
          <img src={require("../../assets/img/img5.png")} alt=""/>
          <div className="num">5,768,911</div>
      <div className="nem">区块链高度</div>
          </div>
          <div className="li">
          <img src={require("../../assets/img/img2.png")} alt=""/>
          <div className="num">5,768,911</div>
      <div className="nem">可信节点数</div>
          </div>
          <div className="li li3">
          <img src={require("../../assets/img/img3.png")} alt=""/>
          <div className="num">5,768,911</div>
      <div className="nem">存证用户量</div>
          </div>
          <div className="li li4">
          <img src={require("../../assets/img/img4.png")} alt="" />
          <div className="num">5,768,911</div>
      <div className="nem">存证数据量</div>
          </div>
          </div>
          </div>
          <div className="query_top query_IMG">
          <div className="left">
          <div className="left_top">
          <span className="line"></span>
          <span>链/上/节/点</span>
          </div>
          </div>
          <img src={require("../../assets/img/lingImg4.png")} alt="" />
          </div>
          <div className="query_top">
          <div className="left">
          <div className="left_top">
          <span className="line"></span>
          <span>案/例/展/示</span>
          </div>
          <div className="text">心理所使用本平台实现了实验数据真实可追溯，心理所使用本平台实现了实验数据真实可追溯，心理所使用本平台实现了实验数据真实可追溯，心理所使用本平台实现了实验数据真实可追溯，心理所使用本平台实现了实验数据真实可追溯，心理所使用本平台实现了实验数据真实可追溯，心理所使用本平台实现了实验数据真实可追溯，</div>
  </div>
  <img src={require("../../assets/img/lineImg3.png")} alt="" />
  </div>
  <div className="query_top query_ul query_ul_img">
  <div className="left">
  <div className="left_top">
  <span className="line"></span>
  <span>应/用/场/景</span>
  </div>
  </div>
  <div className="ul">
  <div className="li">
  <img src={require("../../assets/img/Yimg1.png")} alt="" />
  <div className="nem">证据链+科研人员</div>
  </div>
  <div className="li">
  <img src={require("../../assets/img/Yimg2.png")} alt="" />
  <div className="nem">证据链+出版机构</div>
  </div>
  <div className="li">
  <img src={require("../../assets/img/Yimg3.png")} alt="" />
  <div className="nem">证据链+科研资助机构</div>
  </div>
  <div className="li">
  <img src={require("../../assets/img/Yimg4.png")} alt="" />
  <div className="nem">证据链+社会大众</div>
  </div>
  <div className="li">
  <img src={require("../../assets/img/Yimg5.png")} alt="" />
  <div className="nem">证据链+科研机构</div>
  </div>
  </div>
  </div>
  <div className="query_top query_IMG query_table">
  <div className="left">
  <div className="left_top">
  <span className="line"></span>
  <span>最/新/交/易/记/录</span>
  </div>
  </div>
      {
          !isShow ? <div className="table">
          <div className="h5">
          <span className="tab1">区块编号</span>
          <span  className="tab2">单位</span>
          <span className="tab3">时间</span>
          <span className="tab4">交易数量</span>
          <span className="tab5">区块hash</span>
          </div>

          {
              list.map((item: any,index: any)=>{
                  return(
                      <div className="h6">
                          <span className="tab1">{item.number}</span>
                          <span  className="tab2">中国科学院心理研究所</span>
                          <span className="tab3">{this.getYMDHMS(item.transactions[0].timestamp)}</span>
                          <span className="tab4">{item.transactions.length}</span>
                          <span className="tab5" onClick={() => {
                              this.detial(item.transactions)
                          }}>{item.currentBlockHash}</span>
                      </div>
                  )
              })
          }
          {/*<div className="h6">*/}
          {/*<span className="tab1">086557890</span>*/}
          {/*<span  className="tab2">中国科学院******中心</span>*/}
          {/*<span className="tab3">2021/02/24</span>*/}
          {/*<span className="tab4">12M</span>*/}
          {/*<span className="tab5">55eb1d54a960241c8b57229d872b804a2bfd5ff</span>*/}
          {/*</div>*/}
          </div>: <div className="table">
              <div className="h5">
                   <span style={{width: '40px'}} onClick={()=> {
                       this.setState({
                           isShow: false
                       })
                   }}>
                      <ArrowLeftOutlined />
                   </span>
                  <span className="tab1">
                      创建人</span>
                  <span className="tab2">类型</span>
                  <span className="tab3">交易时间</span>
                  <span className="tab4">状态</span>
                  <span className="tab5">区块编号</span>

              </div>
              {
                  detail.map((lineItem: any,index: any)=>{
                      return(
                          <Collapse accordion>
                              <Panel header={ <div className="h6">
                              <span style={{width: '40px'}}></span>
                              <span className="tab1">{lineItem.subject}</span>
                              <span className="tab2">{lineItem.type}</span>
                              <span  className="tab3">{this.getYMDHMS(lineItem.timestamp)}</span>
                              <span className="tab4">{lineItem.status}</span>
                                  <span className="tab5">{lineItem.txid}</span>
                          </div>} key="1">
                                  {

                                      lineItem.actions  != null && lineItem.actions[0].rwSet.length ?lineItem.actions[0].rwSet[0].wSet.map((e:any) => {
                                          // @ts-ignore
                                          return <div style={{textAlign:'left'}}>
                                              <ReactJson src={this.jsonTop(e)} name={"上链数据"}/>
                                          </div>
                                      }): null
                                  }
                              </Panel>
                          </Collapse>
                      )
                  })
              }
          </div>
      }
  </div>
  </div>
  </div>
  <Footer></Footer>
  </div>
    )
  }
}


export default withRouter(connect((state: any) => state.user, {  evidenceBlock })(EvidenceItem))



// <div  className="intell">
//     <div className="header">
//     <img src={ header } alt="" />
//     </div>
//     <div  className="package">
//     <div className="bag">
//     <div className="title">
//     <span className="leftBorder"><Link to="/evidenceItem">科学论文证据链</Link></span>
//     <span className="border"><Link to="/">证据查验</Link></span>
//     <span className="rightBorder"></span>
//     </div>
//     </div>
//
//     <div className="evidenceItem">
//     { !isShow ?
//     <div>
//         <div className="ul">
//             <div className="li">
//                 <img src={require("../../assets/img/img5.png")} alt="" />
//                 <div className="num">5,768,911</div>
//                 <div className="nem">区块链高度</div>
//             </div>
//             <div className="li">
//                 <img src={require("../../assets/img/img2.png")} alt="" />
//                 <div className="num">5,768,911</div>
//                 <div className="nem">可信节点数</div>
//             </div>
//             <div className="li li3">
//                 <img src={require("../../assets/img/img3.png")} alt="" />
//                 <div className="num">5,768,911</div>
//                 <div className="nem">存证用户量</div>
//             </div>
//             <div className="li li4">
//                 <img src={require("../../assets/img/img4.png")} alt="" />
//                 <div className="num">5,768,911</div>
//                 <div className="nem">存证数据量</div>
//             </div>
//         </div>
//         <div style={ title }>最新存证</div>
//         {
//             list.map((item: any,index: any)=>{
//                 return(
//                     <div style={ bag } onClick={() => {
//                         this.detial(item.transactions)
//                     }}>
//                         <div className="lineBase">区块编号: {item.number}</div>
//                         <div  className="titleColor lineBase">区块hash: {item.currentBlockHash}</div>
//                         <div  className="lineBase">交易数量：{item.transactions.length}</div>
//                         <div  className="lineBase">时间: {this.getYMDHMS(item.transactions[0].timestamp)}</div>
//                         <div className="bagGrey"></div>
//
//                     </div>
//                 )
//             })
//         }
//     </div>
//     : <div>
//         <div className="titleColor" onClick={() => {
//             this.setState({
//                 isShow: false
//             })
//         }}>返回列表</div>
//         <div>文件详情详情 </div>
//         {/*<div>{detail}</div>*/}
//         {
//             detail.map((item:any,index:any) => {
//                 return (
//                     <div style={ bag }>
//                         <div className="lineBase">交易编号: {item.txid}</div>
//                         <div className="lineBase">创建时间: {item.timestamp}</div>
//                         {
//
//                             item.actions  != null && item.actions[0].rwSet.length ?item.actions[0].rwSet[0].wSet.map((e:any) => {
//                                 // @ts-ignore
//                                 return <div>
//                                     <ReactJson src={this.jsonTop(e)} name={"上链数据"}/>
//                                 </div>
//                             }): null
//                         }
//                         <div className="bagGrey"></div>
//                     </div>
//                 )
//             })
//         }
//     </div>
// }
// </div>
// </div>
// <div className="footerIn">
// @基于区块链的科学论文证据链框架研究
// </div>
// </div>
